/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable no-unused-vars */
/* eslint-disable multiline-ternary */
import { useSkin } from '@hooks/useSkin'
import classNames from 'classnames'
import { FormikProvider, useFormik } from 'formik'
import { Fragment, useState } from 'react'
import { BsCheck } from 'react-icons/bs'
import { Button, Col, Form, Label, Row } from 'reactstrap'
import FileUploaderSingle from '../../fileUploader/FileUploaderSingle'
import FormGroupElement from '../../formGroup/FormGroupElement'
import {
  InsuranceFormValidationSchema,
  InsuredPersonOptions,
  insuranceTypeOptions,
  primaryInsuredPersonOptions
} from '../../profile/FormConstant/insuranceForm'
const InsuranceForm = () => {
  const { skin } = useSkin()

  const [data, setData] = useState([])

  // formik hook
  const formik = useFormik({
    initialValues: {
      insuranceType: 'primary',
      primaryInsured: 'client',
      InsuredRadio: 'insuredClient',
      insuranceCompany: '',
      insurancePayer: 'client',
      insuranceMemberId: '',
      insurancePlanId: '',
      insuranceGroupId: '',
      memberId: '',
      planId: '',
      groupId: '',
      copayCoinsurance: '',
      superBillsPayment: 'client',
      deductible: '',
      insurancePayerPhone: '',
      insurancePayerFax: '',
      employerOrSchool: '',
      frontImage: '',
      backImage: '',
      image: ''
    },
    validationSchema: InsuranceFormValidationSchema,
    enableReinitialize: true,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const data = { ...values }
        console.lop('formik data submission: ', data)
        // dispatch(handleAddClient(data))
      }
    }
  })

  return (
    <>
      <FormikProvider value={formik}>
        <Form className="insuranceForm" onSubmit={formik.handleSubmit}>
          <Col>
            <div className=" px-0 client_profile">
              <FormGroupElement
                type="select"
                label="Insurance Company"
                labelClassName="fs-12"
                inputName="insuranceCompany"
                placeholder="Select Insurance company"
                inputClassName={classNames({
                  'form-fields  border  border radius-25': true,
                  lightColors: skin === 'dark'
                })}
                {...formik.getFieldProps('insuranceCompany')}
                formikTouched={formik.touched.insuranceCompany}
                formikError={formik.errors.insuranceCompany}
              >
                {/* <option value=""></option> */}
                <option value="client">Ethera</option>
                <option value="parent">Health Care</option>
              </FormGroupElement>

              <Row>
                <Col lg={4} md={4}>
                  <FormGroupElement
                    type="text"
                    label="Member ID"
                    labelClassName="fs-12 "
                    inputName="insuranceMemberId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insuranceMemberId')}
                    formikTouched={formik.touched.insuranceMemberId}
                    formikError={formik.errors.insuranceMemberId}
                  />
                </Col>

                <Col lg={4} md={4}>
                  <FormGroupElement
                    type="text"
                    label="Group ID"
                    labelClassName="fs-12 "
                    inputName="insuranceGroupId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insuranceGroupId')}
                    formikTouched={formik.touched.insuranceGroupId}
                    formikError={formik.errors.insuranceGroupId}
                  />
                </Col>
                <Col lg={4} md={4}>
                  <FormGroupElement
                    type="text"
                    label="Plan ID"
                    labelClassName="fs-12 "
                    inputName="insurancePlanId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insurancePlanId')}
                    formikTouched={formik.touched.insurancePlanId}
                    formikError={formik.errors.insurancePlanId}
                  />
                </Col>
              </Row>

              <div>
                <Label className="fs-12 pt-1 fw-800">
                  Client's relationship to insured
                </Label>
              </div>
              <div className="demo-inline-spacing ">
                {InsuredPersonOptions.map((item, index) => (
                  <Fragment key={index}>
                    <FormGroupElement
                      type="radio"
                      inputName={item.value}
                      label={item.label}
                      labelClassName="fs-12"
                      formGroupClassName="client_profile--checkbox "
                      inputClassName={classNames({
                        lightColors: skin === 'dark'
                      })}
                      value={formik.values?.InsuredRadio}
                      checked={formik.values.InsuredRadio === item.value}
                      onChange={() =>
                        formik.setFieldValue(`InsuredRadio`, item.value)
                      }
                    />
                  </Fragment>
                ))}
              </div>

              <div>
                <Label className="pt-2 fw-800">Insurance Card </Label>
                <p className="fs-12 ">
                  Upload an image of the front and back of your insurance card
                  to keep on file
                </p>
              </div>

              <Row>
                <Col lg="6" md="6" className="px-0">
                  <FileUploaderSingle
                    lowerBtn
                    frontCard
                    onChange={(file) =>
                      formik.setFieldValue('frontImage', file)
                    }
                    file={formik.values.frontImage}
                    touch={formik.touched.frontImage}
                    error={formik.errors.frontImage}
                  />
                </Col>
                <Col lg="6" md="6" className="px-0">
                  <FileUploaderSingle
                    lowerBtn
                    backCard
                    onChange={(file) => formik.setFieldValue('backImage', file)}
                    file={formik.values.backImage}
                    touch={formik.touched.backImage}
                    error={formik.errors.backImage}
                  />
                </Col>
              </Row>
            </div>
          </Col>
          <hr />
          <Col>
            {/* insurance information */}
            <div className="client_profile px-0">
              <strong className="black ">Insurance Information</strong>

              <div className="client_profile--insuranceInformation mt-1">
                <Col sm={12} md={6}>
                  <div className="d-flex align-items-center form-label">
                    <div className="required-dot" />
                    <Label className="mb-0  pl-5px">Insurance Type</Label>
                  </div>
                  {insuranceTypeOptions.map((item, index) => (
                    <Fragment key={index}>
                      <FormGroupElement
                        type="radio"
                        inputName={item.value}
                        label={item.label}
                        labelClassName="fs-12"
                        formGroupClassName="client_profile--checkbox client_profile--doubleCol__20"
                        inputClassName={classNames({
                          lightColors: skin === 'dark'
                        })}
                        value={formik.values?.insuranceType}
                        checked={formik.values.insuranceType === item.value}
                        onChange={() =>
                          formik.setFieldValue(`insuranceType`, item.value)
                        }
                      />
                    </Fragment>
                  ))}
                </Col>

                <Col sm={12} md={6}>
                  <div className="d-flex align-items-center form-label">
                    <div className="required-dot" />
                    <Label className="mb-0  pl-5px ">
                      Who is the primary insured?
                    </Label>
                  </div>
                  {primaryInsuredPersonOptions.map((item, index) => (
                    <Fragment key={index}>
                      <FormGroupElement
                        type="radio"
                        inputName={item.value}
                        label={item.label}
                        labelClassName="fs-12 "
                        formGroupClassName="client_profile--checkbox client_profile--doubleCol__20"
                        inputClassName={classNames({
                          lightColors: skin === 'dark'
                        })}
                        value={formik.values?.primaryInsured}
                        checked={formik.values.primaryInsured === item.value}
                        onChange={() =>
                          formik.setFieldValue(`primaryInsured`, item.value)
                        }
                      />
                    </Fragment>
                  ))}
                </Col>
              </div>
              <Row className="align-items-start">
                <Col sm={12}>
                  <FormGroupElement
                    type="select"
                    required
                    label="Insurance Provider"
                    labelClassName="fs-12 pl-5px"
                    inputName="insurancePayer"
                    placeholder="Select Insurance Payer"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insurancePayer')}
                    formikTouched={formik.touched.insurancePayer}
                    formikError={formik.errors.insurancePayer}
                  >
                    {/* <option value="">Select Insurance Payer</option> */}
                    <option value="client">Client</option>
                    <option value="parent">Parent</option>
                  </FormGroupElement>
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="text"
                    required
                    label="Member ID"
                    labelClassName="fs-12 pl-5px"
                    inputName="memberId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('memberId')}
                    formikTouched={formik.touched.memberId}
                    formikError={formik.errors.memberId}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="text"
                    label="Plan ID"
                    labelClassName="fs-12 "
                    inputName="planId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('planId')}
                    formikTouched={formik.touched.planId}
                    formikError={formik.errors.planId}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="text"
                    label="Group ID"
                    labelClassName="fs-12 "
                    inputName="groupId"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('groupId')}
                    formikTouched={formik.touched.groupId}
                    formikError={formik.errors.groupId}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="number"
                    label="Copay/Coinsurance"
                    labelClassName="fs-12 "
                    placeholder="$0"
                    inputName="copayCoinsurance"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('copayCoinsurance')}
                    formikTouched={formik.touched.copayCoinsurance}
                    formikError={formik.errors.copayCoinsurance}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="select"
                    label="For Superbills, send Payment to"
                    labelClassName="fs-12 "
                    inputName="superBillsPayment"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('superBillsPayment')}
                    formikTouched={formik.touched.superBillsPayment}
                    formikError={formik.errors.superBillsPayment}
                  >
                    <option value="client">Client</option>
                    <option value="parent">Parent</option>
                  </FormGroupElement>
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="number"
                    label="Deductible"
                    labelClassName="fs-12 "
                    placeholder="$0"
                    inputName="deductible"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('deductible')}
                    formikTouched={formik.touched.deductible}
                    formikError={formik.errors.deductible}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="text"
                    label="Insurance Provider Phone"
                    labelClassName="fs-12 "
                    inputName="insurancePayerPhone"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insurancePayerPhone')}
                    formikTouched={formik.touched.insurancePayerPhone}
                    formikError={formik.errors.insurancePayerPhone}
                  />
                </Col>

                <Col sm={12} md={6}>
                  <FormGroupElement
                    type="text"
                    label="Insurance Provider Fax"
                    labelClassName="fs-12 "
                    inputName="insurancePayerFax"
                    inputClassName={classNames({
                      'form-fields   border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('insurancePayerFax')}
                    formikTouched={formik.touched.insurancePayerFax}
                    formikError={formik.errors.insurancePayerFax}
                  />
                </Col>

                <Col sm={12}>
                  <FormGroupElement
                    type="text"
                    label="Employer/School"
                    labelClassName="fs-12 "
                    inputName="employerOrSchool"
                    inputClassName={classNames({
                      'form-fields  border  radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('employerOrSchool')}
                    formikTouched={formik.touched.employerOrSchool}
                    formikError={formik.errors.employerOrSchool}
                  />
                </Col>

                <Col sm={12}>
                  <FileUploaderSingle
                    onlyImage
                    onChange={(file) => formik.setFieldValue('image', file)}
                    file={formik.values.image}
                    touch={formik.touched.image}
                    error={formik.errors.image}
                  />
                </Col>
              </Row>

              <div className="float-right  review-btn-div d-flex align-item-center">
                <div className="mx-2 ">
                  <Button
                    className=" cancel-btn white-space-nowrap"
                    size="sm"
                    onClick={() => formik.handleReset()}
                  >
                    Cancel
                  </Button>
                </div>
                <div className=" ">
                  <Button
                    size="sm"
                    className="reqbgColor save-btn white-space-nowrap  fw-bold "
                    type="submit"
                  >
                    <BsCheck
                      className="check-icon"
                      size={16}
                      strokeWidth={0.5}
                    />
                    Save
                  </Button>
                </div>
              </div>
            </div>
          </Col>
        </Form>
      </FormikProvider>
    </>
  )
}

export default InsuranceForm
